<template>
  <div class="top">
    <ul>
     
      <li
        :class="i === index ? 'bg' : ''"
        @click="change(index)"
        v-for="(item, index) in topArr"
        v-bind:key="index"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
//导入mixin  混入
import nav from "../mixins/nav"
export default {
  name: "Top",
  data() {
    return {
      topArr: ["html", "css", "js", "vue", "react"], //数据
     
    }
  },
  mixins:[nav],
  
 
 
 
};
</script>

<style scoped>
.top ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 50px;
  background: rgb(37, 37, 37);
  line-height: 50px;
  color: white;
  font-size: 25px;
}

.top ul li {
  width: 20%;
  text-align: center;
}

.top ul li:hover {
  cursor: pointer;
  background: rgb(211, 135, 135);
}

.bg {
  background: hotpink;
}
</style>